import React, { useRef, useEffect, useState } from 'react';
import { Button, Dimensions, RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native';

import axios from 'axios';
import Bar from '../charts/Horizontalbar';
import Pie from '../charts/Pie';
import Line from '../charts/Line';
import BoxCard from '../components/BoxCard';
import ProgressBar from '../components/ProgressBar';
import TitleBox from '../components/TitleBox';
const { width, height } = Dimensions.get('window')
base = "http://192.168.43.57:8088/"

const options = {
    method: "GET",
    url: base + "main"
};

export default function General() {
    const [area_price, setarea_price] = useState(null);
    const [comm_price, setcomm_price] = useState(null);
    const [decoration_new, setdecoration_new] = useState(null);
    const [houseuse_new, sethouseuse_new] = useState(null);
    const [orientation_new, setorientation_new] = useState(null);
    const [house_price_change, sethouse_price_change] = useState(null);
    const [spinning, setSpinning] = useState(false);

    function GetMainData() {
        setSpinning(true);
        axios.request(options).then((response) => {
            // console.log(response)
            // console.log(response.data.data.qx_price_list.series)
            // console.log(response.data.data.cq_house_price)
            console.log(response.data.data.purpose_new_list)
            // setData(response.data.data);
            setarea_price(response.data.data.qx_price_list)
            setcomm_price(response.data.data.xq_price_list)
            setdecoration_new(response.data.data.decoration_new_list)
            sethouseuse_new(response.data.data.purpose_new_list)
            setorientation_new(response.data.data.orientation_new_list)
            sethouse_price_change(response.data.data.cq_house_price)
            setSpinning(false);
        });
    }

    useEffect(() => {
        GetMainData()
    }, []);

    // return <SkiaChart ref={skiaRef} />;
    return (
        <>
            <ScrollView
                style={
                    styles.container
                }
                refreshControl={
                    <RefreshControl
                        refreshing={spinning} // 设置refreshing属性
                        onRefresh={GetMainData} // 设置onRefresh属性
                        colors={['#887ef2']} // 设置colors属性（Android）
                        tintColor="#887ef2" // 设置tintColor属性（iOS）
                    />
                }
            >
                {false && (<Button
                    onPress={GetMainData}
                    title="Learn More"
                    color="#841584"
                    accessibilityLabel="Learn more about this purple button"
                ></Button>)}
                {area_price ? (
                    <BoxCard>
                        <TitleBox title="重庆市区县平均价格排名Top7" label="该项数据统计全重庆各区县房价平均价格排序"></TitleBox>
                        <Bar labels={area_price.labels} series={area_price.series}></Bar>
                    </BoxCard>
                ) : (
                    <></>
                )}
                {comm_price ? (
                    <BoxCard>
                        <TitleBox title="重庆市小区平均价格排名Top7" label="该项数据统计全重庆各小区房价平均价格排序"></TitleBox>
                        <Bar labels={comm_price.labels} series={comm_price.series} title="重庆市小区平均价格排名Top7"></Bar>
                    </BoxCard>
                ) : (
                    <></>
                )}
                {house_price_change ? (
                    <BoxCard>
                        <TitleBox title="近十年重庆价格趋势" label="该项数据基于2013-2023年十年间数据进行统计"></TitleBox>
                        <Line series={house_price_change.series} labels={house_price_change.labels} title="近十年重庆价格趋势"></Line>
                    </BoxCard>
                ) : (
                    <></>
                )}
                {decoration_new ? (
                    <BoxCard>
                        <TitleBox title="装修情况分布" label="该项数据统计重庆市内所有房源的装修情况占比"></TitleBox>
                        {
                            decoration_new.data.map((item, index) => <ProgressBar key={index} title={item.labels} value={item.series} percent={item.percent}></ProgressBar>)
                        }
                    </BoxCard>
                ) : (
                    <></>
                )}
                {houseuse_new ? (
                    <BoxCard>
                        <TitleBox title="房屋用途分布" label="该项数据统计重庆市内所有房源的房屋用途占比"></TitleBox>
                        {
                            houseuse_new.data.map((item, index) => <ProgressBar key={index} title={item.labels} value={item.series} percent={item.percent}></ProgressBar>)
                        }
                    </BoxCard>
                ) : (
                    <></>
                )}
                {orientation_new ? (
                    <BoxCard>
                        <TitleBox title="房屋朝向分布" label="该项数据统计重庆市内所有房源的朝向占比"></TitleBox>
                        {
                            orientation_new.data.map((item, index) => <ProgressBar key={index} title={item.labels} value={item.series} percent={item.percent}></ProgressBar>)
                        }
                    </BoxCard>
                ) : (
                    <></>
                )}

            </ScrollView>
        </>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // padding: 17,
    }
})